<template>
  <div class="page-container">
    <div class="in-container">
      <AppSearchForm
        @submit="search()"
        @reset="reset()"
        size="small"
        labelWidth="auto"
      >
        <el-form-item>
          <el-input v-model="state.query.KeyWords" placeholder="请输入" />
        </el-form-item>
      </AppSearchForm>

      <div class="btn-area">
        <el-button @click="openDialog" type="primary"> 新增 </el-button>
        <el-button @click="deleteSelectData" type="danger" :loading="state.deleteBtnLoading"
          >删除</el-button
        >
      </div>

      <AppPageTable
        stripe
        :data="state.tableData.data"
        @change="getList()"
        :option="state.tableData.option"
        class="table"
      >
        <el-table-column type="selection" width="40" />
        <el-table-column
          :show-overflow-tooltip="true"
          prop="descriptionCh"
          label="中文名"
          width="140"
        />
        <el-table-column
          :show-overflow-tooltip="true"
          prop="descriptionEn"
          label="英文名"
          width="140"
        />
        <el-table-column
          :show-overflow-tooltip="true"
          prop="termCode"
          label="代码"
          width="140"
        />
        <el-table-column label="操作" width="150" fixed="right">
          <template #default="scope">
            <el-button @click.stop="update(scope.row)" type="primary"
              >编辑</el-button
            >
            <el-popconfirm
              title="确定删除本条数据吗？"
              @confirm="deleteData(scope.row)"
            >
              <template #reference>
                <el-button type="danger">删除</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </AppPageTable>

      <el-dialog
        :title="state.dialogData.title"
        v-model="state.dialogData.show"
        width="400px"
      >
        <el-form
          :model="state.formData"
          :rules="state.formRules"
          label-width="80px"
          ref="form"
        >
          <el-form-item prop="descriptionCh" label="中文名">
            <el-input v-model="state.formData.descriptionCh"></el-input>
          </el-form-item>
          <el-form-item prop="descriptionEn" label="英文名">
            <el-input v-model="state.formData.descriptionEn"></el-input>
          </el-form-item>
          <el-form-item prop="termCode" label="代码">
            <el-input v-model="state.formData.termCode"></el-input>
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="cancel" link>取消</el-button>
            <el-button type="primary" @click="submit"> 确认 </el-button>
          </span>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script setup>
import {
  ref,
  onMounted,
  watch,
  computed,
  reactive,
  nextTick,
  defineEmits,
} from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import request from "@/public/request";

import AppSearchForm from "@/components/AppSearchForm.vue";
import AppPageTable, { useTableOption } from "@/components/AppPageTable2";
import AppTitleBox from "@/components/AppTitleBox.vue";

const state = reactive({
  query: {
    KeyWords: "",
  },
  tableData: {
    data: [],
    option: useTableOption(),
  },
  dialogData: {
    show: false,
    title: "",
    btnLoading: false,
  },
  formData: {
    descriptionCh: "",
    descriptionEn: "",
    termCode: ""
  },
  formRules: {
    descriptionCh: [{ required: true, message: "请输入中文名", trigger: "change" }],
    descriptionEn: [{ required: true, message: "请输入英文名", trigger: "change" }],
  },
  deleteBtnLoading: false
})

const getList = () => {
  state.tableData.option.loading = true;
  request
    .get("/api/csshippingterm/querypage", {
      KeyWords: state.query.KeyWords,
      PageIndex: state.tableData.option.page,
      PageSize: state.tableData.option.pageSize,
    })
    .then((res) => {
      state.tableData.data = res.content;
      state.tableData.option.total = res.totalElements;
    })
    .finally(() => {
      state.tableData.option.loading = false;
    });
};

const search = () => {
  state.tableData.option.page = 1;
  state.tableData.pageSize = 10;
  getList();
};

const reset = () => {
  state.query = {
    KeyWords: ""
  };
  state.tableData.option.page = 1;
  state.tableData.pageSize = 10;
  getList();
};

const update = (row) => {
  state.dialogData.title = "编辑信息";
  state.dialogData.show = true;
  nextTick(() => {
    state.formData = JSON.parse(JSON.stringify(row));
  });
};

const deleteSelectData = () => {
  if (state.tableData.option.selected.length > 0) {
    let deleteArray = [];
    for (let i of state.tableData.option.selected) {
      deleteArray.push(i.id);
    }
    state.deleteBtnLoading = true;
    request
      .post("/api/csshippingterm/delete", {
        idArray: deleteArray,
      })
      .then((res) => {
        if (res.status) {
          ElMessage.success(res.message);
          getList();
        } else {
          ElMessage.error(res.message);
        }
      })
      .finally(() => (state.deleteBtnLoading = false));
  } else {
    ElMessage.warning("请至少选择一条数据");
  }
};

const deleteData = (data) => {
  request
    .post("/api/csshippingterm/delete", {
      idArray: [data.id],
    })
    .then((res) => {
      if (res.status) {
        ElMessage.success(res.message);
        getList();
      } else {
        ElMessage.error(res.message);
      }
    });
}

const openDialog = () => {
  state.dialogData.title = "新增信息";
  state.dialogData.show = true;
};

const form = ref();
const submit = async () => {
  state.dialogData.btnLoading = true;
  let url = "";
  if (state.formData.id) {
    url = "/api/csshippingterm/update";
  } else {
    url = "/api/csshippingterm/create";
  }
  await form.value.validate();
  request.post(url, state.formData).then((res) => {
    if (res.status) {
      ElMessage.success(res.message);
      getList();
      state.dialogData.show = false;
    } else {
      ElMessage.error(res.message);
    }
    state.dialogData.btnLoading = false;
  });
};
const cancel = () => {
  state.dialogData.show = false;
};

watch(
  () => state.dialogData.show,
  (newVal) => {
    if (!newVal) {
      state.formData = {
        descriptionCh: "",
        descriptionEn: "",
        termCode: ""
      }
      nextTick(() => {
        form.value.resetFields();
      });
    }
  }
);

onMounted(() => {
  getList();
});
</script>

<style lang="scss" scoped>
.btn-area {
  margin-bottom: 8px;
}

.in-container {
  display: flex;
  flex-direction: column;
  height: 100%;

  .table {
    flex: 1;
  }
}
</style>
